<template>
	<view class="content">
		<!-- / -->
		<view>
			<view class="top" >
				<view class="addr">
					<view class="dizhi">
						<text class="text">{{ city }}</text>
						<image src="../../static/dizhi1.png" mode=""></image>
					</view>

					<u-search
						placeholder="请输入您所需要的产品名称"
						shape="round"
						:show-action="false"
						v-model="keyword"
						@tap="clkSrch()"
					></u-search>
				</view>
				<view class="scanCd">
					<image
						src="../../static/zhu2.png"
						mode=""
						@click="scanCd()"
					></image>
					<image
						src="../../static/zhu3.png"
						mode=""
						@tap="clkCrdPkg()"
					></image>
				</view>
			</view>
			<view class="afternoonTea">
				<image :src="bander.image" mode="" @click="tianzhuan"></image>
			</view>
			<view class="shop">
				<view class="name">我的店铺</view>
			
					<view class="info">
						<view class="top1">
							<view class="left">
								<image
									:src="data.cover"
									v-if="data.cover"
									mode=""
									@click="storeIntroduction(data.id)"
								></image>
							</view>
							<view class="right">
								<view class="right1">
									<view
										class=""
										@click="storeIntroduction(data.id)"
									>
										{{ data.name }}
									</view>
									<image
										src="../../static/zhu111.png"
										mode=""
										@click="getLocationBulletBox(data.id)"
									></image>
								</view>
								<view class="right2">
									<text @click="storeIntroduction(data.id)">
										已售{{ data.sold }}
									</text>
									<text @click="storeIntroduction(data.id)">
										人均￥{{ data.price }}/人
									</text>
									<!-- <text @click="storeIntroduction(data.id)">
										点评:{{ data.review }}
									</text> -->
								</view>
								<view class="right3">
									<text @click="storeIntroduction(data.id)">
										{{ data.type }}
									</text>
									<text
										class="text"
										@click="storeIntroduction(data.id)"
									>
										{{ data.site }}
									</text>
									<text @click="storeIntroduction(data.id)">
										{{
											data.changdu == undefined
												? 0
												: data.changdu
										}}km
									</text>
								</view>
								<view class="right4">
									<text @click="storeIntroduction(data.id)">
										{{ data.free }}
									</text>
									<!-- <text @click="huodong()"></text> -->
								</view>
								<view class="right5">
									<view class="view">
										<text>
											当前为{{ data.num }}/{{
												data.full
											}}单:
										</text>
										<bolck
											v-for="(item2,
											index2) in data.full + 1"
											:key="index2"
										>
											<image
												src="../../static/mmm2.png"
												mode=""
												v-if="index2 < data.num"  
											></image>
											<image
												src="../../static/caise2.png"
												mode=""
												v-else-if="
													index2 === data.full &&
														data.num < data.full
												"
											></image>
											<image
												src="../../static/caise333.png"
												mode=""
												v-else-if="
													index2 === data.full &&
														data.num === data.full
												"
											></image>
											<image
												src="../../static/mmm1.png"
												mode=""
												v-else
											></image>
										</bolck>
									</view>
									<view class="view1">
										<text @click="confirmBuyOrdr(data.id)">
											买单
										</text>
									</view>
								</view>
							</view>
						</view>
						<view class="button">
							<view class="name">餐厅环境</view>
							<view class="shuxian"></view>
							<view class="showPictures">
								<view
									v-for="(item1, index1) in data.atlas"
									style="margin-top: 15rpx;"
									:key="index1"
								>
									<image :src="item1" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
			<!-- <tui-button margin="0 0 30rpx 0" :size="34" bold>页面主操作</tui-button> -->
			<view class="tankuang" v-if="isTouming">
				<view class="box">
					<image
						src="../../static/guanbi.png"
						mode=""
						class="image"
						@click="isTouming = false"
					></image>
					<text class="text">{{ bulletInfo.name }}</text>
					<view class="info1">
						<image src="../../static/ss2.png" mode=""></image>

						<text @click="dianhua(bulletInfo.phone)">
							{{ bulletInfo.phone }}
						</text>
					</view>
					<view class="info1">
						<image src="../../static/ss3.png" mode=""></image>
						<text>{{ bulletInfo.site }}</text>
					</view>
					<view class="info1">
						<image src="../../static/ss1.png" mode=""></image>
						<text>
							{{
								bulletInfo.site_time == null
									? ''
									: bulletInfo.site_time
							}}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import amap from '@/commonsdk/SDK/amap-wx.js';
export default {
	data() {
		return {
			openID: '',
			isTouming: false,
			keyword: '',
			city: '',
			uid: '',
			data: [],
			id: 0,
			bulletInfo: {},

			isHide: false,
			code1: '',
			userInfo: {},
			status: 'nomore',
			// token11: 0,
			page: 0,
			limit: 10,
			longitude: '', // 经度
			dimension: '', // 维度
			changdu: '',
			bander: {}
		};
	},
	onShow() {
		console.log('页面出来了 ');
		try {
			const uid = uni.getStorageSync('uid');
			if (uid) {
				this.uid = uid;
				console.log('我的uid :>> ', this.uid);
			}
		} catch (e) {
			// error
		}
		//
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
			}
		});
		this.amapPlugin = new amap.AMapWX({
			//高德地图KEY，随时失效，请务必替换为自己的KEY，参考：http://ask.dcloud.net.cn/article/35070
			key: 'b9f002e72df0b071c51a8237c18b07a5'
		});
		//console.log("this.amapPluginamapPlugin: ", this.amapPlugin);
		// 获取信息中
		uni.showLoading({
			title: '获取信息中'
		});
		//定位地址
		this.amapPlugin.getRegeo({
			success: data => {
				console.log('data: ', data);
				this.city = data[0].regeocodeData.addressComponent.city.replace(
					/市/g,
					''
				); //把"市"去掉
				console.log('定位的地址 :>> ', this.city);
			}
		});
		// // 因此提示信息
		uni.hideLoading();
		this.$u.post('/api/shop/shop_type').then(res => {
			console.log('res: ', res);
		});
		this.getShop();
	},

	onLoad() {
		try {
			const uid = uni.getStorageSync('uid');
			if (uid) {
				this.uid = uid;
				console.log('我的uid :>> ', this.uid);
			}
		} catch (e) {
			// error
		}
		//
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
			}
		});
		this.amapPlugin = new amap.AMapWX({
			//高德地图KEY，随时失效，请务必替换为自己的KEY，参考：http://ask.dcloud.net.cn/article/35070
			key: 'b9f002e72df0b071c51a8237c18b07a5'
		});
		//console.log("this.amapPluginamapPlugin: ", this.amapPlugin);
		// 获取信息中
		uni.showLoading({
			title: '获取信息中'
		});
		//定位地址
		this.amapPlugin.getRegeo({
			success: data => {
				console.log('data: ', data);
				this.city = data[0].regeocodeData.addressComponent.city.replace(
					/市/g,
					''
				); //把"市"去掉
				console.log('定位的地址 :>> ', this.city);
			}
		});
		// // 因此提示信息
		uni.hideLoading();
		this.$u.post('/api/shop/shop_type').then(res => {
			console.log('res: ', res);
		});
		this.getShop();
		this.getbander();
	},

	methods: {
		// tiaozhuan
		tianzhuan() {
			uni.navigateTo({
				url: "../my/introduction/introduction?id="+this.bander.link
			});
		},
		dianhua(e) {
			uni.makePhoneCall({
				phoneNumber: e //仅为示例
			});
		},
		//计算赌徒距离
		calculateDistance(lat1, lng1, lat2, lng2) {
			var radLat1 = (lat1 * Math.PI) / 180.0;
			var radLat2 = (lat2 * Math.PI) / 180.0;
			var a = radLat1 - radLat2;
			var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			var s =
				2 *
				Math.asin(
					Math.sqrt(
						Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
								Math.cos(radLat2) *
								Math.pow(Math.sin(b / 2), 2)
					)
				);
			s = s * 6378.137;
			s = Math.round(s * 10000) / 10000;

			s = s.toFixed(2);
			return s;
		},
		//扫码
		scanCd() {
				try {
				const uid = uni.getStorageSync('uid');
				if (!uid) {
					uni.navigateTo({
						url: '../login/login'
					});
				} else {
					// 调起条码扫描
					uni.scanCode({
					   	success: function (res) {
							console.log('res :>> ', res);
							
							uni.navigateTo({
								url: res.result
							});
					        console.log('条码类型：' + res.scanType);
					        console.log('条码内容：' + res.result);
							console.log("所扫码的字符集: "+res.charSet)
							console.log("内容为二维码携带的path: "+res.path)
							console.log("原始数据，base64编码: "+res.rawData)
					    }
					});
				}
			} catch (e) {
				// error
			}
			
		},
		// 跳转搜索
		clkSrch() {
			uni.navigateTo({
				url: './srchFor/srchFor'
			});
		},
		// 跳转卡包
		clkCrdPkg() {
			try {
				const uid = uni.getStorageSync('uid');
				if (!uid) {
					uni.navigateTo({
						url: '../login/login'
					});
				} else {
					uni.navigateTo({
						url: '../my/crdPkg/crdPkg'
					});
				}
			} catch (e) {
				// error
			}
			// uni.navigateTo({
			// 	url: '../my/crdPkg/crdPkg'
			// });
		},
		// 跳转活动
		huodong() {
			try {
				const uid = uni.getStorageSync('uid');
				if (!uid) {
					uni.navigateTo({
						url: '../login/login'
					});
				} else {
					uni.navigateTo({
						url: '../my/activity/activity'
					});
				}
			} catch (e) {
				// error
			}

			// uni.navigateTo({
			// 	url: '../my/activity/activity'
			// });
		},
		// 点击预览图片

		imgYu(event) {
			console.log('event: ', event);
			uni.previewImage({
				urls:
					'http://ww1.sinaimg.cn/large/006CFcGUgy1gk7er4925yj302t03dt9f.jpg'
			});
		},

		//跳转门店介绍
		storeIntroduction(id) {
			try {
				const uid = uni.getStorageSync('uid');
				if (!uid) {
					uni.navigateTo({
						url: '../login/login'
					});
				} else {
					uni.navigateTo({
						url: '../my/introduction/introduction?id=' + id
					});
				}
			} catch (e) {
				// error
			}

			// uni.navigateTo({
			// 	url: '../my/introduction/introduction?id=' + id
			// });
		},
		// 获取店铺
		async getShop() {
			const { data: res } = await this.$u.post('api/shop/shop_index', {
				uid: this.uid,
				page: 1,
				limit: 10
			});
			console.log('获取店铺 ', res);
			// this.data = [...this.data, ...res];
			this.data = res;
			this.id = this.data.id;
			console.log('this.data :>> ', this.data);
			
				try {
					const userLocation = uni.getStorageSync('userLocation');
					if (userLocation) {
						var _this = this;
						var list = userLocation.split(',');
						var longitude1 = list[0];
						var latitude2 = list[1];
						console.log('longitude1 :>> ', longitude1);
						console.log('latitude2 :>> ', latitude2);
						var juli = this.calculateDistance(
							longitude1,
							latitude2,
							res.longitude,
							res.dimension
						);
						console.log('当前的距离>> ', juli);
						_this.data.changdu = juli;
					}
				} catch (e) {
					// error
				}
			
		},
		//获取位置弹框
		async getLocationBulletBox(sid) {
			this.isTouming = true;
			const { data: res } = await this.$u.post('api/shop/shop_site', {
				sid: sid
			});
			this.bulletInfo = res;
			console.log('this.bulletInfo >>  ', this.bulletInfo);
		},
		// 确认买单
		confirmBuyOrdr(id) {
			try {
				const uid = uni.getStorageSync('uid');
				if (!uid) {
					uni.navigateTo({
						url: '../login/login'
					});
				} else {
					uni.navigateTo({
						url: '../my/details/details?sid=' + id
					});
				}
			} catch (e) {
				// error
			}
		},
		// bander
		async getbander() {
			const res = await this.$u.post('api/users/banner');
			this.bander = res.data;
			console.log('this.bander :>> ', this.bander);
		}
	},
	onPullDownRefresh() {
		this.getShop();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	}
	// onReachBottom() {
	// 	this.page = this.page + 1;
	// 	this.limit = this.limit + 3;
	// 	if (this.page > 2) {
	// 		return (this.status = 'nomore');
	// 	} else {
	// 		this.status = 'loading';
	// 		this.getShop();
	// 	}

	// 	// uni.$showMsg("上拉加载")
	// }
};
</script>

<style lang="scss" scoped>
.content {
	.top {
		width: 100vw;
		height: 386rpx;
		background: linear-gradient(180deg, #ffa73d, #f8f8f8);
		// border-radius: 0 0 50rpx 50rpx;
		overflow: hidden;

		.addr {
			display: flex;
			margin-top: 30rpx;

			.dizhi {
				width: 180rpx;
				line-height: 60rpx;
				text-align: center;
				display: flex;
				justify-content: space-around;
				align-items: center;
				// background-color: #FFFFFF;

				.text {
					font-size: 34rpx;
					margin-left: 20rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #ffffff;
				}

				image {
					width: 30rpx;
					margin-left: -48rpx;
					height: 42rpx;
				}
			}

			u-search {
				width: 545rpx;
			}
		}

		.scanCd {
			margin-top: 20rpx;
			display: flex;

			image {
				order: 1;
				height: 272rpx;
			}
		}
	}

	.afternoonTea {
		width: 100vw;
		height: 226rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.shop {
		padding: 0 31rpx 31rpx 31rpx;

		.name {
			height: 34rpx;
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 500;
			color: #333333;

			margin-bottom: 20rpx;
		}

		.info {
			width: 690rpx;
			// height: 576rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;

			.top1 {
				display: flex;

				.left {
					width: 201rpx;
					height: 241rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					width: 430rpx;

					.right1 {
						height: 30rpx;
						line-height: 30rpx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 19rpx;

						view {
							height: 30rpx;
							font-size: 30rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						image {
							width: 90rpx;
							height: 30rpx;
						}
					}

					.right2 {
						height: 23rpx;
						font-size: 24rpx;
						font-family: 'Microsoft YaHei', PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 19rpx;
						display: flex;
						justify-content: space-between;

						// text:nth-child(1) {
						// 	margin-right: 20rpx;
						// }

						// text:nth-child(2) {
						// 	margin-right: 20rpx;
						// }
					}

					.right3 {
						height: 23rpx;
						font-size: 24rpx;
						font-family: 'Microsoft YaHei', PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 19rpx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 47rpx;
						// white-space: nowrap; /* 规定文本是否折行 */
						// overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
						// text-overflow: ellipsis;
						.text {
							width: 240rpx;
							text-align: center;
							height: 35rpx;
							white-space: nowrap; /* 规定文本是否折行 */
							overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
							text-overflow: ellipsis;
						}
					}

					.right4 {
						margin-bottom: 11rpx;
						display: flex;
						justify-content: space-between;

						text {
							display: inline-block;
							text-align: center;
							color: #fefefe;
						}

						text:nth-child(1) {
							width: 136rpx;
							height: 40rpx;
							line-height: 40rpx;

							background: linear-gradient(
								90deg,
								#ff6494 0%,
								#ffa86a 100%
							);
							border-radius: 5rpx;
							margin-right: 20rpx;
						}

						// text:nth-child(2) {
						// 	width: 80rpx;
						// 	height: 40rpx;
						// 	line-height: 40rpx;
						// 	background: linear-gradient(
						// 		180deg,
						// 		#ff6494 0%,
						// 		#ffa86a 100%
						// 	);
						// 	border-radius: 5rpx;
						// 	margin-right: 100rpx;
						// }

						text:nth-child(2) {
							width: 85rpx;
							height: 40rpx;
							line-height: 40rpx;
							background: #ff0000;
							border-radius: 20rpx;

							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: bold;
							color: #fefefe;
						}
					}

					.right5 {
						height: 34rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.view {
							height: 34rpx;
							display: flex;
							align-items: center;
							text {
								height: 34rpx;
								line-height: 34rpx;
								font-size: 20rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
							}
							image {
								width: 27rpx;
								height: 27rpx;
								margin: 0 7rpx;
							}
						}
						.view1 {
							width: 70rpx;
							height: 40rpx;
							line-height: 40rpx;

							text-align: center;
							background: #ff0000;
							border-radius: 20rpx;

							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: bold;
							color: #fefefe;
						}
					}
				}
			}

			.button {
				.name {
					width: 118rpx;
					height: 28rpx;
					font-size: 29rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 28rpx;
				}

				.shuxian {
					width: 120rpx;
					height: 8rpx;
					background: linear-gradient(180deg, #ffa73d, #ffdd65);
					border-radius: 4rpx;
					margin-top: 10rpx;
				}

				.showPictures {
					display: flex;
					// justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 10rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						margin-right: 20rpx;
					}
					view:nth-child(3n) {
						image {
							margin-right: 0;
						}
					}
				}
			}
		}
	}

	.tankuang {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;

		.box {
			position: relative;
			width: 560rpx;
			height: 400rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 362rpx;

			.text {
				display: block;
				height: 85rpx;
				line-height: 85rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 500;
				color: #333333;

				border-bottom: 2rpx solid #c7c7c7;
			}

			.info1 {
				display: flex;
				align-items: center;
				margin-top: 35rpx;
				margin-left: 50rpx;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 31rpx;
				}

				text {
					font-size: 30rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.image {
				position: absolute;
				right: -60rpx;
				top: -60rpx;
				width: 71rpx;
				height: 71rpx;
			}
		}
	}
}
</style>
